<template>
	<div class="">
		<div class="table-contain">
			<a-table :columns="columns" :data-source="pileEntities" :rowKey="data => data.id"
			         :loading="loading" :pagination="false" :scroll="{x: 1200}">
				<template slot="chargePower" slot-scope="data">
					{{ data.chargePower }}KW
				</template>
				<template slot="type" slot-scope="data">
					<a-tag :color="data.type == 1 ? '#f50' : '#2db7f5'">
						{{ data.type == 1 ? '国标' : '非国标' }}
					</a-tag>
				</template>
				<template slot="speed" slot-scope="data">
					<a-tag :color="data.speed == 1 ? '#f50' : (data.speed == 2 ? '#108ee9' : '#2db7f5')">
						{{ data.speed == 1 ? '直流快充' : (data.speed == 2 ? '交流慢充' : '综合充电站') }}
					</a-tag>
				</template>
				<template slot="createTime" slot-scope="data">
					{{ moment ( data.createTime ).format ( 'YYYY-MM-DD' ) }}
				</template>
				<template slot="status" slot-scope="data">
					<a-tag :color="data.status == 1 ? 'blue' : 'red'">
						{{ data.status == 1 ? '正常使用' : '暂停服务' }}
					</a-tag>
				</template>
				<template slot="action" slot-scope="data">
					<a-icon type="edit" class="icon-box" style="margin-right: 10px"
					        @click.stop="editPile(data.id)"/>
					<a-icon type="delete" class="icon-box" style="margin-right: 10px"
					        @click.stop="deleteStation(data.id)"/>
					<a-icon type="tool" class="icon-box" @click.stop="setStatus(data)"/>
				</template>
			</a-table>
		</div>
		<div class="page-box">
			<a-pagination
				size="small"
				:showQuickJumper="true"
				:showSizeChanger="true"
				:current="page.current"
				:pageSize="page.pageSize"
				:total="total"
				:show-total="(total) => `共${total}条`"
				@showSizeChange="onShowSizeChange"
				@change="changePageSize"
			></a-pagination>
		</div>
	</div>
</template>

<script>
import moment from "moment";

export default {
	name: "PileTable",
	props: {
		pileEntities: {
			type: Array,
			default: null
		},
		total: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			loading: true,
			columns: [
				{title: '充电桩名称', dataIndex: 'pileName', key: 'pileName', width: 200, ellipsis: true},
				{title: '品牌', dataIndex: 'pileBrand', key: 'pileBrand', width: 200},
				{title: '桩体编号', dataIndex: 'pileNumber', key: 'pileNumber', width: 200},
				{title: '充电功率', scopedSlots: {customRender: 'chargePower'}, width: 100},
				{title: '桩体类型', scopedSlots: {customRender: 'type'}, width: 100},
				{title: '充电速度', scopedSlots: {customRender: 'speed'}, width: 120},
				{title: '所属电站', dataIndex: 'stationName', key: 'stationName', width: 240},
				{title: '投运时间', scopedSlots: {customRender: 'createTime'}, width: 120},
				{title: '状态', scopedSlots: {customRender: 'status'}, width: 120},
				{title: '操作', dataIndex: '', key: 'x', scopedSlots: {customRender: 'action'}, width: 120, fixed: 'right'},
			],
			page: {
				current: 1,
				pageSize: 20,
			},
			moment,
		}
	},
	watch: {
		pileEntities( newValue, oldValue ) {
			this.loading = false
		}
	},
	methods: {
		editPile( id ) {
			this.$emit ( 'edit', id )
		},
		deleteStation( id ) {
			console.log ( id )
		},
		setStatus( pile ) {
			this.$emit ( 'status', pile )
		},
		onShowSizeChange( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.$emit ( 'changePage', {page: current, pageSize: pageSize} )
		},
		changePageSize( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			// 利用$emit调用父组件的方法
			this.$emit ( 'changePage', {page: current, pageSize: pageSize} )
		},
	}
}
</script>

<style scoped>

</style>
